<template>
  <div>

    <!--    卡片1-->
    <el-card class="box-card">
      <span>销售退单</span>
    </el-card>
    <el-card class="box-card2">

      <el-form :inline="true" ref="searchForm" :model="keyword" class="demo-form-inline">
        <el-form-item label="客户名称：">
          <el-input v-model="keyword.reName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="订单编号：">
          <el-input v-model="keyword.reNum" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" size="small">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="empty" size="small">清空</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="deleteMore" size="small">批量删除</el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="reOrderNum"
          label="订单编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reCliName"
          label="客户名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reCliPhone"
          label="联系电话"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reSta"
          label="状态"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reTime"
          label="申请时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reDoTime"
          label="处理时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="reRemark"
          label="备注"
          width="150">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="deleteRefund(scope.row)" type="success">删除
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="updateRefund(scope.row)">修改状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
import { delBatch, delOne, refundFindAll, updateSta } from '@/api/sale'

export default {
  data() {
    return {
      keyword: {
        reName: null,
        reNum: null
      },
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      refund: {
        id:null,
        reOrderNum: '',
        reCliName: '',
        reCliPhone: '',
        reSta: '',
        reDoTime: '',
        reTime: '',
        reRemark: ''
      },
      ids:[],
      measureList:[]
    }
  },
  methods: {
    refundAll() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        reName: this.keyword.reName,
        reNum: this.keyword.reNum
      }
      refundFindAll(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo",pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    }
    ,
    deleteRefund(row) {
      this.$confirm('是否确认删除id为"' + row.id + '"的数据项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOne({ id: row.id }).then(res => {
          // console.log("pageInfo",pageInfo)
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          })
          this.refundAll()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
    ,
    deleteMore() {
      const ids = this.ids.join(",");
      console.log(ids)
      this.$confirm('是否确认删除id为"' + ids + '"的数据项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let params = {
          ids: ids
        }
        console.log(params)
        delBatch(params).then(res => {
          let pageInfo = res.data;
          // console.log("pageInfo",pageInfo)
          this.total = pageInfo.total;
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000,
          });
          this.refundAll()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    updateRefund: function(row) {
      // console.log(row)
      this.refund = row
      var getTime = new Date().getTime() //获取到当前时间戳
      var time = new Date(getTime) //创建一个日期对象
      let now = this.nowDate(time)

      // console.log('时间', this.refund.reDoTime)
      if (row.reSta == '已处理') {
        this.$message({
          type: 'warning',
          message: '请勿重复处理!',
          duration: 1000
        })
      } else if (row.resSta == '' || row.resSta == null || row.resSta == '未处理') {
        this.refund.reDoTime = now
        updateSta(this.refund).then(res => {
          this.$message({
            type: 'success',
            message: 'ok!',
            duration: 1000
          })
          this.refundAll()
        })

      }
    }
    ,
    search() {
      this.refundAll()
    }
    ,
    empty() {
      this.keyword = {}
      this.refundAll()
    }
    ,
    handleSelectionChange(selectionRowArr) {
      // console.log(selectionRowArr)
      this.ids = [];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].id)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val // 将当前页大小存起来，方便下一方法使用
      console.log(`每页 ${val} 条`)
      this.refundAll(this.pageNum, val, this.keyword)
    }
    ,

    // 当前页改变方法
    handleCurrentChange(val) {
      this.pageNum = val
      console.log(`当前页: ${val}`)
      this.refundAll(val, this.pageSize, this.keyword)
    },
    nowDate(time) {
      var year = time.getFullYear(); // 年
      var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
      var date = time.getDate().toString().padStart(2, '0'); // 日
      var hour = time.getHours().toString().padStart(2, '0'); // 时
      var minute = time.getMinutes().toString().padStart(2, '0'); // 分
      var second = time.getSeconds().toString().padStart(2, '0'); // 秒
      return (
        year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      )
    }
  },
  created() {
    this.refundAll()
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  height: 80px;
  margin-left: 20px;
}

.box-card2 {
  margin-top: 50px;
  width: 100%;
  margin-left: 20px;

}
</style>
